<template>
  <div class="box">
    <div class="head">
      <div class="top">
        <div class="lump"></div>
        <div class="name">汇方圆</div>
        <div class="integral">积分</div>
      </div>
      <div class="bottom">
        <div class="wellber"></div>
        <div class="pillow">威尔贝鲁（WELLBER）婴儿定型枕新生儿U型枕头 彩棉舒适卡通定型枕 x1</div>
      </div>
    </div>
    <div class="head-r x-img">
      <image class="no-star" :src="noStarUrl" @tap="addStar(1)" v-if="activeNum<1" />
      <image class="star" :src="starUrl" v-if="activeNum>0 && activeNum<=5" @tap="addStar(1)" />
      <image class="no-star" :src="noStarUrl" @tap="addStar(2)" v-if="activeNum<2" />
      <image class="star" :src="starUrl" v-if="activeNum>1 && activeNum<=5" @tap="addStar(2)" />
      <image class="no-star" :src="noStarUrl" @tap="addStar(3)" v-if="activeNum<3" />
      <image class="star" :src="starUrl" v-if="activeNum>2 && activeNum<=5" @tap="addStar(3)" />
      <image class="no-star" :src="noStarUrl" @tap="addStar(4)" v-if="activeNum<4" />
      <image class="star" :src="starUrl" v-if="activeNum>3 && activeNum<=5" @tap="addStar(4)" />
      <image class="no-star" :src="noStarUrl" @tap="addStar(5)" v-if="activeNum<5" />
      <image class="star" :src="starUrl" v-if="activeNum===5" />
    </div>

    <div class="input">
      <textarea placeholder="你的评价" style="height:100px;" v-model="texts" ref="name"></textarea>
      <img :src="imgPath" @click="choosePic()" />
      <img v-if="imgList.length >= 2" :src="imgList[1]">
      <img v-if="imgList.length >= 3" :src="imgList[2]">
    </div>
    <div class="footer" @click="submission()">发表评价</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNum: 0,
      noStarUrl: "/static/imgs_s09/icon_star_border.png",
      starUrl: "/static/imgs_s09/icon_star_green.png",
      texts: "",
      imgPath: "/static/imgs_s09/s09_add.png",
      imgList: [],
      imgPaths: "",
      nickName: "",
      avatarUrl: ""
    };
  },

  methods: {
    addStar(num) {
      let that = this;
      that.activeNum = num;
    },
    /**
     * 上传图片
     */
    uploadImg(image) {
      var that = this;
      return new Promise((resolve, reject) => {
        if (image.length == 0) {
          resolve();
        } else {
          for (var i = 0; i < image.length; i++) {
            //成功或失败
            wx.uploadFile({
              url: "http://localhost:7777/prom/upload/oss",
              filePath: image[i], //要上传文件资源的路径
              name: "file", //文件对应的 key , 开发者在服务器端通过这个key可以获取到文件二进制内容
              header: {
                //HTTP 请求 Header，Header 中不能设置 Referer
                "Content-Type": "multipart/form-data" //实际返回的内容的内容类型
              },
              success: res => {
                if (that.imgPaths == "") {
                  that.imgPaths = JSON.stringify(
                    JSON.parse(res.data).ossFileUrlBoot
                  );
                  resolve();
                } else {
                  that.imgPaths =
                    that.imgPaths +
                    "," +
                    JSON.stringify(JSON.parse(res.data).ossFileUrlBoot);
                  resolve();
                }
              },
              fail: res => {
                console.log("失败：" + res);
              }
            });
          }
        }
      });
    },
    /**
     * 上传方法
     */
    submitTo() {
      var that = this;
      return new Promise((resolve, reject) => {
        wx.request({
          url: "http://localhost:7777/prom/addCom", //开发者服务器接口地址",
          data: {
            star: that.activeNum,
            content: that.texts,
            pics: that.imgPaths,
            member_nick_name: that.nickName,
            member_icon: that.avatarUrl
          }, //请求的参数",
          method: "POST",
          success: res => {
            if (res.data == 1) {
              console.log("页面跳转");
             wx.navigateTo({ url: "/pages/s09_appraise03/main" });
            }else{
              wx.showToast({
                title: "添加失败~",
                icon: "none",
                duration: 1500
              });
            }
            resolve();
          },
          fail: () => {},
          complete: () => {}
        });
      });
    },
    /**
     * http://tmp/wx4e55ae0cff23e7d0.o6zAJs4WBNolbdR_FisKvuL7W5Kk.RAU2xvjjr8rSc6da8ab7eca8a312ae2342819547b4ca.jpg
     * 
     * 选择图片
     */
    choosePic() {
      var that = this;
      wx.chooseImage({
        count: "3", //最多可以选择的图片张数,
        sizeType: "compressed",
        success: res => {
          that.imgPath = res.tempFilePaths[0];
          console.log(that.imgPath);
          that.imgList = res.tempFilePaths;
        }, //返回图片的本地文件路径列表 tempFilePaths,
        fail: () => {},
        complete: () => {}
      });
    },
    /**
     * 点击提交
     */
    submission() {
      var that = this;
      if (that.activeNum == 0 || that.texts == "") {
        wx.showToast({
          title: "请打上评级，写上评论~",
          icon: "none",
          duration: 1500
        });
      } else {
        wx.getSetting({
          // 查看是否授权
          success: function(res) {
            if (res.authSetting["scope.userInfo"]) {
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success: function(res) {
                  that.nickName = res.userInfo.nickName;
                  that.avatarUrl = res.userInfo.avatarUrl;
                  that.uploadImg(that.imgList).then(() => {
                    return that.submitTo();
                  });
                }
              });
            }
          }
        });
      }
    }
  },
  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #ddd;
}

.box .head {
  display: flex;
  flex-direction: column;
  height: 142px;
  width: 375px;
  margin-top: 9px;
  background-color: white;
}
.head .top {
  display: flex;
  flex-direction: row;
}

.top .lump {
  height: 30px;
  width: 30px;
  background: rgba(244, 244, 244, 1);
  margin-left: 11px;
  margin-top: 12px;
}

.top .name {
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(48, 48, 48, 1);
  margin-left: 6px;
  margin-top: 20px;
}

.top .integral {
  width: 34px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  background: rgba(0, 160, 233, 1);
  border-radius: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-left: 6px;
  margin-top: 22px;
}

.head .bottom {
  display: flex;
  flex-direction: row;
}

.bottom .wellber {
  height: 72px;
  width: 72px;
  background-color: powderblue;
  margin-left: 10px;
  margin-top: 15px;
}

.bottom .pillow {
  margin-top: 15px;
  margin-left: 7px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(44, 44, 47, 1);
}

.x-img {
  background: #ffffff;
}
.x-img image {
  width: 30px;
  height: 30px;
}

.box .input {
  height: 205px;
  width: 375px;
  background-color: white;
  border-top: 1px solid #ddd;
}

.input div {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin-left: 16px;
  margin-top: 17px;
}

.input img {
  height: 79px;
  width: 79px;
}

.box .footer {
  width: 347px;
  height: 41px;
  line-height: 41px;
  text-align: center;
  background: rgba(50, 177, 108, 1);
  border-radius: 6px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-left: 14px;
}
</style>
